<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.bar{
			width: 800px;
			height: 500px;
			margin:50px auto;
			background: #cdcdcd;
		}
		.axis path,
		.axis line{
			fill: none;
			stroke: black;
			shape-rendering: optimizeSpeed;
		}
		.axis text{
			font-size: 12px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<div class="bar">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 800;
		var height = 500;
		var padding = {top: 50,right: 50,bottom: 50,left: 50};
		var dataset = [50,30,45,68,79,12,39,52,88,120,69,74];

		var xAxisWidth = 400;
		var yAxisWidth = 400;

		var xScale = d3.scale.ordinal()
								.domain(d3.range(dataset.length))
								.rangeRoundBands([0,xAxisWidth],0.2)

		var yScale = d3.scale.linear()
								.domain([0,d3.max(dataset)])
								.range([0,yAxisWidth]);

		var svg = d3.select(".bar").append("svg").attr("width",width).attr("height",height);

		var rect = svg.selectAll("rect").data(dataset).enter().append("rect")
										.attr("fill","steelblue")
										.attr("x",function(d,i) {   //设置矩形的x坐标
											return padding.left + xScale(i);
										})
										.attr("y",function(d) {  //设置矩形的y坐标
											return height - padding.bottom - yScale(d)
										})
										.attr("width",xScale.rangeBand()) //设置矩形的宽度
										.attr("height",function(d) {  //设置矩形的高度
											return yScale(d)
										})
			var text = svg.selectAll("text").data(dataset).enter().append("text")
										.attr("fill","white")
										.attr("font-size","14px")
										.attr("text-anchor","middle")
										.attr("x",function(d,i) {
											return padding.left + xScale(i);
										})
										.attr("y",function(d) {
											return height - padding.bottom - yScale(d)
										})
										.attr("dx",xScale.rangeBand() / 2)
										.attr("dy","1em")
										.text(function(d) {
											return d;
										})
			var xAxis = d3.svg.axis()
										.scale(xScale)
										.orient("bottom");

			//重新设置y轴比例尺的值域，与原来的相反
			yScale.range([yAxisWidth,0]);

			var yAxis = d3.svg.axis()
										.scale(yScale)
										.orient("left")
			 svg.append("g")
			 		.attr("class","Xaxis axis")
			 		.attr("transform","translate(" + padding.left + ","+ (height - padding.bottom) +")")
			 		.call(xAxis)

			svg.append("g")
			 		.attr("class","Yaxis axis")
			 		.attr("transform","translate(" + padding.left + ","+ (padding.bottom) +")")
			 		.call(yAxis)

	</script>
</body>
</html>